<template>
  <div>
    <header class="site-header">
      <div class="container index">
        <nav class="navbar cn">
          <a
            class="navbar-brand"
            href="/#/home"
            style="z-index: 999; height: 60px"
          >
            <img
              src="@/assets/img/dev_logo.png"
              style="vertical-align: bottom"
            />
          </a>
          <div class="nav" :class="showNav ? 'active' : ''">
            <div class="nav-cont">
              <div
                class="nav-item"
                v-for="(item, index) in re_userLinks"
                :key="item.text"
              >
                <XRouter :to="{ path: item.link }" v-if="!item.items.length">{{
                  item.text
                }}</XRouter>
                <div
                  v-if="item.items.length"
                  @click="changshowitem(item, index)"
                >
                  <a
                    class="header-line this_line"
                    :href="item.link"
                    v-if="item.items.length"
                  >
                    {{ item.text }}
                  </a>
                  <div
                    class="nav-child navChild dev"
                    style="transform: scale(0); opacity: 0"
                    :style="{ display: item.showitem ? 'block' : '' }"
                  >
                    <table>
                      <tr v-for="items in item.items" :key="items.text">
                        <td>
                          <XRouter :to="{ path: items.link }">
                            <div class="nav-tit">{{ items.text }}</div>
                          </XRouter>
                        </td>
                      </tr>
                    </table>
                  </div>
                </div>
              </div>
              <div class="nav-item" v-if="!name" @click="openDialog()">
                <i class="iconfont icon-dev_Notice"></i>
              </div>
              <div class="nav-item" v-else>
                <div class="more-message-item">
                  <div class="more-message-icon">
                    <i class="iconfont icon-dev_Notice"></i>
                    <span class="red-cirle"></span>
                  </div>
                  <div class="more-message">
                    <ul>
                      <li>
                        <span class="red-cirle-message"></span>
                        <div>
                          xx回复了你的贴子<a href="#"
                            >hjgritllj反对开挂就发给大家</a
                          >
                        </div>
                      </li>
                      <li>
                        <span class="red-cirle-message"></span>
                        <div>
                          xx回复了你的贴子<a href="#"
                            >hjgritllj反对开挂就发开挂就发开挂就发开挂就发开挂就发开挂就发开挂就发给大家</a
                          >
                        </div>
                      </li>
                      <li>
                        <span class="red-cirle-message"></span>
                        <div>
                          xx回复了你的贴子<a href="#"
                            >hjgritllj反对开挂就发给大家</a
                          >
                        </div>
                      </li>
                    </ul>
                    <div class="more-message-check" @click="goReminder()">
                      查看全部提醒<i
                        class="iconfont icon-left-double-arrow"
                      ></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="nav-btn" v-if="!name">
              <div class="nlogin">
                <a class="loginBtn" v-text="'登录'" @click="openDialog()"></a>
                <a
                  class="regBtn"
                  href="http://www.rcsdev.juphoon.com/#/register"
                  v-text="'注册'"
                  target="_blank"
                ></a>
              </div>
            </div>
            <div class="user-name nav-btn" v-else>
              <div class="more-item">
                <div class="more">
                  <div style="float: right">
                    <i class="iconfont icon-xiala"></i>
                  </div>
                  <div class="nicheng" title>{{ name }}</div>
                </div>
                <div class="more-toggle">
                  <router-link to="/person">
                    <i class="iconfont icon-dev_home"></i>我的主页</router-link
                  >
                  <!-- <a href="/cn/console/"
                    ><i class="iconfont icon-dev_home"></i>我的主页</a
                  > -->
                  <a href="javascript:;" @click="log_out()"
                    ><i class="iconfont icon-signOut"></i>退出登录</a
                  >
                </div>
              </div>
            </div>
          </div>
          <div class="headerIcon">
            <i
              class="iconfont"
              :class="showNav ? 'icon-quxiao' : 'icon-home_shousuo_h_icon'"
              @click="$EventBus.$emit('changeNav')"
            ></i>
          </div>
        </nav>
      </div>
    </header>
    <LoginDialog
      :showMask="showMask"
      :data="{ codeUrl: codeUrl, uuid: uuid }"
      @close="closeDialog"
      @loginForm="login"
      ref="loginDialog"
    ></LoginDialog>
  </div>
</template>

<script>
var _this;
import { getCodeImage, login, getUserInfo, logout } from "@/api/user";
import { accountInfo } from "@/api/home";
import LoginDialog from "@/components/LoginDialog";
import XRouter from "@/components/XRouterLink";
import { resolveNavLinkItem } from "../utils";
import encryption from "@/utils/mUtils";
import { mapState, mapMutations } from "vuex";
export default {
  name: "NavBar",
  components: {
    XRouter,
    LoginDialog,
  },
  data() {
    return {
      site: [],
      UserInfo: {},
      user_name: "",
      showlang: false,
      showNav: false,
      re_userLinks: [],
      langlist: "",
      showMask: false, // 模态框显示
      codeUrl: "", //验证码图片
      uuid: "", //验证码uuid
      loginForm: {},
    };
  },
  watch: {
    $route() {
      if (window.innerWidth < 800) {
        this.showNav = false;
      }
      this.re_userLinks = (this.nav || []).map((link) => {
        return Object.assign(resolveNavLinkItem(link), {
          items: (link.items || []).map(resolveNavLinkItem),
        });
      });
      //   this.changelangselect();
    },
  },
  computed: {
    ...mapState({
      id: (state) => state.user.id, //理解为传入state对象，修改state.count属性
      name: (state) => state.user.name, //理解为传入state对象，修改state.count属性
      token: (state) => state.user.token, //理解为传入state对象，修改state.count属性
    }),
    userNav() {
      // this.$themeLocaleConfig.nav || this.$site.themeConfig.nav
      var userNav = [
        {
          text: "首页",
          link: "/dev/",
        },
        {
          text: "文档中心",
          link: "/dev/docs/00_manual/",
        },
        {
          text: "技术论坛",
          link: "/dev/",
        },
      ];
      return userNav || [];
    },
    nav() {
      // 配合多语言
      return this.userNav;
    },
    userLinks() {
      return (this.nav || []).map((link) => {
        return Object.assign(resolveNavLinkItem(link), {
          items: (link.items || []).map(resolveNavLinkItem),
        });
      });
    },
  },
  created() {
    _this = this;
    this.re_userLinks = (this.nav || []).map((link) => {
      return Object.assign(resolveNavLinkItem(link), {
        items: (link.items || []).map(resolveNavLinkItem),
      });
    });
    // this.changelangselect();
  },
  mounted() {
    console.log(this.token);
    // console.log(mapState);
    if (localStorage.user_name) this.user_name = localStorage.user_name;
    if (localStorage.getItem("DEVELOPID")) _this.getUserInfo();
    else localStorage.clear();
    _this.$EventBus.$on("openDialog", () => {
      _this.openDialog();
    });
  },
  methods: {
    ...mapMutations(["SET_TOKEN", "SET_USERINFO", "SET_MOREINFO"]),
    //登录弹框
    openDialog() {
      _this.showMask = true;
      _this.getCodeImage();
    },
    closeDialog() {
      _this.showMask = false;
      _this.$refs.loginDialog.$refs["loginForm"].resetFields();
    },
    login(val) {
      _this.loginForm = val;
      let parma = {
        accountName: _this.loginForm.account,
        password: encryption.encrypt(
          encryption.calMD5(_this.loginForm.password)
        ),
        phone: _this.loginForm.phone,
        word: _this.loginForm.code,
        uuid: _this.uuid,
      };
      login(parma)
        .then((res) => {
          let data = res.data ? res.data : res;
          if (data.ret === 1019 || data.ret === 1046 || data.ret === 1052) {
            _this.getCodeImage();
            _this.$message({
              message: data.msg,
              type: "error",
              center: true,
              duration: 1 * 1000,
            });
          } else {
            _this.SET_TOKEN(data.token);
            _this.closeDialog();
            _this.$message({
              message: "登录成功",
              type: "success",
              center: true,
              duration: 1 * 1000,
            });
            _this.getUserInfo();
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    /**获取用户信息 */
    getUserInfo() {
      getUserInfo()
        .then((res) => {
          let data = res.data;
          _this.SET_USERINFO(data);
          _this.accountInfo();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    /**获取用户贴子数 评论数信息 */
    accountInfo() {
      accountInfo({ id: _this.id }).then((res) => {
        let data = res.data;
        _this.SET_MOREINFO(data);
      });
    },
    // 获取图片
    getCodeImage() {
      getCodeImage()
        .then((res) => {
          let data = res.data;
          _this.codeUrl = data.image;
          _this.uuid = data.uuid;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    changshowitem(item) {
      item.showitem = !item.showitem;
      console.log(JSON.parse(JSON.stringify(this.re_userLinks)));
      this.re_userLinks = JSON.parse(JSON.stringify(this.re_userLinks));
    },
    log_out() {
      logout()
        .then((res) => {
          console.log(res);
          // localStorage.removeItem("DEVELOPID");
          localStorage.clear();
          window.location.href = "/";
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    goReminder() {
      this.$router.push("/reminder");
    },
  },
};
</script>

<style lang="less" scoped>
@import url("@/assets/css/header_footer.less");
@import url("//at.alicdn.com/t/font_1986404_8fs7crvc73y.css");
// @import url('../assets/css/font/iconfont.css');

// .nav-item.languages .languagecont{
// opacity: 0;
// }
// .nav-item.languages:hover .languagecont{
// opacity: 1;
// display:block
// }
.nav-item:hover .nav-child {
  transform: scale(1) !important;
  opacity: 1 !important;
}

.nav-item.languages {
  position: absolute;
}

.en .nav .languages {
  left: 200px;
}

.nav-item.search {
  margin: 10px;
  font-size: 16px;
  text-align: center;
  position: relative;
  float: left;
}

.searchBar {
  position: fixed;
}
.red-cirle {
  background: red;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: absolute;
  top: 18px;
  right: -1px;
}
.icon-home_shousuo_h_icon,
.icon-quxiao {
  color: #fff;
}

.nav-item.links,
.nav-item.olddoc {
  display: none !important;
}

@media (max-width: 800px) {
  .nav-item.search {
    display: none !important;
  }

  .nav-item.languages {
    position: relative;
    width: 100%;
  }

  .en .nav .languages {
    left: 0px;
  }
}

@media (max-width: 1600px) {
  .nav-item.links,
  .nav-item.olddoc {
    display: none !important;
  }
}

.nav.active {
  display: block;
}

.navbar {
  padding: 0.7rem 2rem;
  line-height: 3.6rem - 1.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  height: 3.6rem;
  background-color: #002375;
  box-sizing: border-box;

  .logo {
    height: 3.6rem - 1.4rem;
    min-width: 3.6rem - 1.4rem;
    margin-right: 0.8rem;
    vertical-align: top;
  }

  .site-name {
    font-size: 1.3rem;
    font-weight: 600;
    color: #0055d6;
    position: relative;
  }

  .links {
    padding-left: 1.5rem;
    box-sizing: border-box;
    // background-color: white;
    white-space: nowrap;
    font-size: 0.9rem;
    position: absolute;
    right: 2rem;
    top: 0.7rem;
    display: flex;

    .search-box {
      flex: 0 0 auto;
      vertical-align: top;
    }
  }
}

@media (max-width: 800px) {
  .nav-item.languages .languagecont {
    opacity: 1;
    display: none;
  }

  .navbar {
    padding-left: 4rem;

    .can-hide {
      display: none;
    }

    .links {
      padding-left: 1.5rem;
    }

    .site-name {
      width: calc(100vw - 9.4rem);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
.regBtn {
  margin-left: 6px;
}
</style>
